<template>
  <view class="timer-container">
    <view class="header">
      <text class="title">计时器</text>
    </view>

    <!-- 时间设置 -->
    <view class="time-setting" v-if="!isRunning && !isPaused">
      <view class="time-picker">
        <picker-view :value="pickerValue" @change="onPickerChange" class="picker">
          <picker-view-column>
            <view v-for="i in 24" :key="i" class="picker-item">{{ String(i-1).padStart(2, '0') }}</view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="i in 60" :key="i" class="picker-item">{{ String(i-1).padStart(2, '0') }}</view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="i in 60" :key="i" class="picker-item">{{ String(i-1).padStart(2, '0') }}</view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="time-labels">
        <text class="time-label">时</text>
        <text class="time-label">分</text>
        <text class="time-label">秒</text>
      </view>
    </view>

    <!-- 倒计时显示 -->
    <view class="countdown-display" v-if="isRunning || isPaused">
      <view class="countdown-time">{{ formatTime(remainingTime) }}</view>
      <view class="progress-ring">
        <view class="progress-bg"></view>
        <view class="progress-bar" :style="{ transform: `rotate(${progressAngle}deg)` }"></view>
      </view>
    </view>

    <!-- 控制按钮 -->
    <view class="control-buttons">
      <view v-if="!isRunning && !isPaused" class="btn start-btn" @click="startTimer">
        <text class="btn-text">开始</text>
      </view>
      
      <template v-else>
        <view class="btn pause-btn" @click="pauseTimer" v-if="isRunning">
          <text class="btn-text">暂停</text>
        </view>
        <view class="btn resume-btn" @click="resumeTimer" v-if="isPaused">
          <text class="btn-text">继续</text>
        </view>
        <view class="btn stop-btn" @click="stopTimer">
          <text class="btn-text">停止</text>
        </view>
      </template>
    </view>

    <!-- 快捷时间按钮 -->
    <view class="quick-buttons" v-if="!isRunning && !isPaused">
      <view v-for="time in quickTimes" :key="time.label" class="quick-btn" @click="setQuickTime(time)">
        <text class="quick-text">{{ time.label }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pickerValue: [0, 5, 0], // 默认5分钟
      isRunning: false,
      isPaused: false,
      remainingTime: 0,
      totalTime: 0,
      timer: null,
      quickTimes: [
        { label: '1分钟', hours: 0, minutes: 1, seconds: 0 },
        { label: '3分钟', hours: 0, minutes: 3, seconds: 0 },
        { label: '5分钟', hours: 0, minutes: 5, seconds: 0 },
        { label: '10分钟', hours: 0, minutes: 10, seconds: 0 },
        { label: '15分钟', hours: 0, minutes: 15, seconds: 0 },
        { label: '30分钟', hours: 0, minutes: 30, seconds: 0 }
      ]
    }
  },
  
  computed: {
    progressAngle() {
      if (this.totalTime === 0) return 0
      const progress = (this.totalTime - this.remainingTime) / this.totalTime
      return progress * 360
    }
  },
  
  methods: {
    onPickerChange(e) {
      this.pickerValue = e.detail.value
    },
    
    startTimer() {
      const hours = this.pickerValue[0]
      const minutes = this.pickerValue[1]
      const seconds = this.pickerValue[2]
      
      this.totalTime = hours * 3600 + minutes * 60 + seconds
      
      if (this.totalTime === 0) {
        uni.showToast({
          title: '请设置时间',
          icon: 'none'
        })
        return
      }
      
      this.remainingTime = this.totalTime
      this.isRunning = true
      this.isPaused = false
      
      this.timer = setInterval(() => {
        this.remainingTime--
        
        if (this.remainingTime <= 0) {
          this.timerFinished()
        }
      }, 1000)
    },
    
    pauseTimer() {
      this.isRunning = false
      this.isPaused = true
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    
    resumeTimer() {
      this.isRunning = true
      this.isPaused = false
      
      this.timer = setInterval(() => {
        this.remainingTime--
        
        if (this.remainingTime <= 0) {
          this.timerFinished()
        }
      }, 1000)
    },
    
    stopTimer() {
      this.isRunning = false
      this.isPaused = false
      this.remainingTime = 0
      this.totalTime = 0
      
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    
    timerFinished() {
      this.stopTimer()
      
      // 播放提示音
      uni.showModal({
        title: '时间到！',
        content: '计时器时间已到',
        showCancel: false,
        confirmText: '确定'
      })
      
      // 震动提醒
      uni.vibrateShort()
    },
    
    setQuickTime(time) {
      this.pickerValue = [time.hours, time.minutes, time.seconds]
    },
    
    formatTime(seconds) {
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = seconds % 60
      
      return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
    }
  },
  
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.timer-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
}

.time-setting {
  margin-bottom: 80rpx;
}

.time-picker {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.picker {
  height: 400rpx;
}

.picker-item {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: #ffffff;
}

.time-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
  padding: 0 60rpx;
}

.time-label {
  font-size: 28rpx;
  color: #ffffff;
  opacity: 0.8;
}

.countdown-display {
  text-align: center;
  margin-bottom: 80rpx;
  position: relative;
}

.countdown-time {
  font-size: 80rpx;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
  margin-bottom: 40rpx;
  font-family: 'Courier New', monospace;
}

.progress-ring {
  width: 300rpx;
  height: 300rpx;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
}

.progress-bg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8rpx solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8rpx solid transparent;
  border-top-color: #ffffff;
  box-sizing: border-box;
  transform-origin: center;
  transition: transform 1s linear;
}

.control-buttons {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  margin-bottom: 60rpx;
}

.btn {
  padding: 25rpx 50rpx;
  border-radius: 50rpx;
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  min-width: 120rpx;
  text-align: center;
}

.start-btn, .resume-btn {
  background: rgba(76, 175, 80, 0.3);
  border-color: rgba(76, 175, 80, 0.5);
}

.pause-btn {
  background: rgba(255, 193, 7, 0.3);
  border-color: rgba(255, 193, 7, 0.5);
}

.stop-btn {
  background: rgba(244, 67, 54, 0.3);
  border-color: rgba(244, 67, 54, 0.5);
}

.btn-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: bold;
}

.quick-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.quick-btn {
  padding: 25rpx;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 15rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.quick-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.2);
}

.quick-text {
  font-size: 26rpx;
  color: #ffffff;
  opacity: 0.9;
}
</style>